<template>
  <!-- 收货地址 -->
  <van-contact-card 
  type="edit" 
  v-if="orderProduct.address"
  :name="`${orderProduct.address.consignee} ${addressDetail}`" 
  :tel="orderProduct.address.mobile" :editable="false"
  />

  <!-- 商品卡片 -->
  <van-card
    :title="orderProduct.product_product.name"
    :thumb="orderProduct.product_product.thumbs_text"
    :num="orderProduct.pronum"
    v-if="orderProduct.product_product"
  >
    <template #title>
      <div class="title">{{orderProduct.product_product.name}}</div>
    </template>

    <!-- 卡片的插槽部分 -->
    <template #desc v-if="orderProduct.prop_list">
        <van-tag class="tag" type="danger" v-for="(prop,index) in orderProduct.prop_list" :key="index">{{prop}}</van-tag>
    </template>
    <template #desc v-else>
      <van-tag class="tag" type="danger">无规格数据</van-tag>
    </template>

    <template #tags>
      <div class="price">单价：￥{{orderProduct.price}}</div>
    </template>

    <template #price>
      <div class="price">合计：￥{{orderProduct.total}}</div>
    </template>
  </van-card>

  <!-- 订单信息 -->
  <template v-if="orderProduct.order">
      <van-cell title="订单号" :value="orderProduct.order.code" />
    <van-cell title="订单总价" :value="orderProduct.orderTotal+'元'" />
    <van-cell title="支付方式" :value="orderProduct.order.pay_text+'支付'" />
    <van-cell title="订单状态" :value="orderProduct.order.status_text" />
    <van-cell title="优惠金额" :value="-orderProduct.total+orderProduct.orderTotal+'元'" />
    <van-cell title="下单时间" :value="orderProduct.order.createdate" />
    <van-cell title="订单描述" :value="orderProduct.order.remark" />
  </template>

  <!-- 操作按钮组 -->
  <div class="actions">
    <van-button square hairline type="primary" size="large">在线客服</van-button>
    <!-- <van-button square hairline type="danger" size="large">申请退款</van-button> -->
  </div>
</template>
<script setup>

  const {proxy} = getCurrentInstance()
  const id = proxy.$route.query.id
  const orderProduct = ref({})
  const addressDetail = ref('')
  onBeforeMount(async()=>{
    let result = await proxy.$GET({url:'/order/info',params:{id}})
    if(result.code==0)proxy.$router.push('/order')
    orderProduct.value = result.data
    const {province_text,city_text,district_text,address} = orderProduct.value.address
    addressDetail.value = [province_text,city_text,district_text,address].filter(e=>e.trim()).join('-')
  })
</script>
<style scoped>
  @import url('/assets/css/OrderInfo.css');
</style>